{% extends 'user/product_base.html' %}

{% block head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
{% endblock %}

{% block content %}
<!-- Main content 主要内容---->
{#鲜花专区#}
    <section class="pt-4 pl-9 pr-3 pb-3" data-aos="zoom-in">
        <div class="page-wrapper">
<!--    {#    鲜花专区;内容部分#}-->
            <div class="page-body">
              <div class="container-lg" style="max-width: 1380px">
                <div class="row">
                <!-- Left Sidebar -->
                    <div class="col-lg-3 mb-4">
                        <div class="search-section pr-5">
                            <h2 class="h4 mb-4">鲜花专区</h2>
                            <div class="mb-4">
                                <h3 class="h5 mb-3">分类</h3>
                                <div class="list-group">
                                    {% if categories %}
                                    {% for category in categories %}
                                    <a href="{{ url_for('flower.product', cate_id=category.id) }}"
                                       class="list-group-item {% if category.id == current_category.id %}bg-light-info{% endif %} list-group-item-action">
                                        {{ category.name }}
                                    </a>
                                    {% endfor %}
                                    {% else %}
                                    <div class="empty-state-small">
                                        <i class="fas fa-folder-open text-muted" style="font-size: 2rem;"></i>
                                        <p class="text-muted mb-0 mt-2">暂无分类</p>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>

                            <h3 class="h5 mb-3">搜索</h3>
                            <form method="get" action="{{ url_for('flower.Fsearch') }}">
                                <input type="text" name="keyword" class="form-control mb-3" placeholder="输入花名搜索..." value="{{ keyword }}">
                                <button type="submit" class="btn btn-sm btn-primary search-button">搜索</button>
                                <a href="{{ url_for('flower.product') }}" class="reset-link">重置选项</a>
                            </form>
                        </div>
                    </div>
                <!-- Main Content Area -->
                    <div class="col-lg-9">
                        {% if p.items %}
                        <div class="row row-cols-1 row-cols-md-3">
                            {% for flower in p.items %}
                            <div class="col">
                                <div class="card flex-column m-lg-0" style="scale: 80%">
                                    <img src="{{ flower.flowerImg }}" class="card-img-top" alt="{{ flower.name }}">
                                    <div class="card-body">
                                        <h5 class="card-title">{{ flower.name }}</h5>
                                        <p class="card-text">{{ flower.description }}</p>
                                        <p class="card-text"><small class="text-muted">¥{{ "%.2f"|format(flower.price) }}</small></p>
                                        <div class="text-center mt-4 d-flex justify-content-between">
                                            <a href="{{ url_for('flower.flower', flower_id=flower.id) }}" class="btn btn-primary btn-sm" style="display: inline-block;">查看详情</a>
                                            <form action="{{ url_for('cart.add_to_cart', flower_id=flower.id) }}" method="POST" style="display:inline-block;">
                                                <button type="submit" class="btn btn-primary btn-sm">加入购物车</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        <!-- Pagination -->
                        <nav aria-label="Page navigation example" class="mt-4">
                            <ul class="pagination justify-content-center">
                                <!-- Previous Page -->
                                {% if p.has_prev %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('flower.product', cate_id=current_category.id if current_category else None, page=p.prev_num, keyword=keyword) }}" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                {% else %}
                                <li class="page-item disabled">
                                    <a class="page-link" href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                {% endif %}

                                <!-- Page Numbers -->
                                {% for page_num in p.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
                                {% if page_num %}
                                <li class="page-item {% if page_num == p.page %}active{% endif %}">
                                    <a class="page-link" href="{{ url_for('flower.product', cate_id=current_category.id if current_category else None, page=page_num, keyword=keyword) }}">{{ page_num }}</a>
                                </li>
                                {% else %}
                                <li class="page-item disabled">
                                    <a class="page-link" href="#">...</a>
                                </li>
                                {% endif %}
                                {% endfor %}

                                <!-- Next Page -->
                                {% if p.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('flower.product', cate_id=current_category.id if current_category else None, page=p.next_num, keyword=keyword) }}" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                                {% else %}
                                <li class="page-item disabled">
                                    <a class="page-link" href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                                {% endif %}
                            </ul>
                        </nav>
                        {% else %}
                        <div class="d-flex justify-content-center align-items-center" style="min-height: 400px;">
                            <div class="empty-state text-center">
                                <img src="{{ url_for('static', filename='front/images/product/empty-products.png') }}" alt="暂无商品" class="empty-image">
                                <p class="mt-3">暂无商品</p>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
              </div>
            </div>
        </div>
    </section>

{% endblock %}
{% block css %}
<style>
    .empty-state {
        text-align: center;
        margin-top: 50px;
    }
    .empty-image {
        max-width: 200px;
        margin-bottom: 20px;
        animation: fadeIn 1s ease-in-out;
    }
    .empty-state-small {
        text-align: center;
        padding: 20px 10px;
        background-color: #f8f9fa;
        border-radius: 8px;
        border: 1px dashed #dee2e6;
        transition: all 0.3s ease;
    }
    .empty-state-small:hover {
        background-color: #e9ecef;
    }
    .fas {
        animation: fadeIn 1s ease-in-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
</style>
{% endblock %}
{% block js %}
{% endblock %}